{% extends 'bases/base.html' %}
{% load static %}

{% block content %}
<div class="d-flex align-items-stretch center">
    <div class="card-exit">
        <a class="card-exit__pencil" href="/profile-settings/">
            <i class="fa fa-pencil-square-o card-exit__fa-pencil" aria-hidden="true"></i>
        </a>
        <a class="card-exit__times" href="/">
            <i class="fa fa-times card-exit__fa-times" aria-hidden="true"></i>
        </a>
    </div>
    <div class="profile-container">
        <div class="row no-gutters">
            <div class="avatar">
                <div class="avatar-exit">
                    <a class="avatar-exit__pencil" href="/profile-settings/">
                        <i class="fa fa-pencil-square-o avatar-exit__fa-pencil" aria-hidden="true"></i>
                    </a>
                    <a class="avatar-exit__times" href="/">
                        <i class="fa fa-times avatar-exit__fa-times" aria-hidden="true"></i>
                    </a>
                </div>
                <a class="avatar__upload" data-toggle="modal" data-target="#photoModal">
                        <i class="fa fa-camera avatar_camera" aria-hidden="true"></i>
                </a>
                <img class="d-lg-flex justify-content-lg-center avatar__img" src="https://avatars.dicebear.com/api/human/{{item.name}}.svg">
            </div>
            <div class="col-sm-6 info">
                <div class="row">
                    <div class="col-sm info__sm">
                        <h4 class="info__username">{{item.name}}</h4>
                    </div>
                    <div class="col-sm">
                        <div class="container info__networks">
                            <i class="fa fa-map-marker info__gold-color" aria-hidden="true"></i>
                            {% if item.location %}
                            <nobr> {{item.location}}</nobr>
                            {% else %}
                            <nobr>Location</nobr>
                            {% endif %}
                            <br>
                            <i class="fa fa-envelope info__gold-color" aria-hidden="true"></i>
                            {% if item.email %}
                            <nobr> {{item.email}}</nobr>
                            {% else %}
                            <nobr>Email</nobr>
                            {% endif %}
                            <br><br>
                            {% if item.Vk %}
                            <a href="{{ item.Vk }}" class="fa fa-vk info__network" aria-hidden="true"></a>
                            {%endif%}

                            {%if item.instagram%}
                            <a href="{{ item.instagram }}" class="fa fa-instagram info__network" aria-hidden="true"></a>
                            {%endif%}

                            {%if item.facebook%}
                            <a href="{{ item.facebook }}" class="fa fa-facebook info__network" aria-hidden="true"></a>
                            {%endif%}

                            {%if item.twitter%}
                            <a href="{{ item.twitter }}" class="fa fa-twitter info__network" aria-hidden="true"></a>
                            {%endif%}

                            {%if item.odnoklassniki%}
                            <a href="{{ item.odnoklassniki }}" class="fa fa-odnoklassniki info__network"
                               aria-hidden="true"></a>
                            {%endif%}

                            {%if item.youtube_play%}
                            <a href="{{ item.youtube_play }}" class="fa fa-youtube-play info__network"
                               aria-hidden="true"></a>
                            {%endif%}

                        </div>
                    </div>
                    <div class="col-sm-12 info__card-aboutme">
                        <h4 class="info__aboutme">About me:</h4>
                        <br>
                        <div class="container info__text">
                            <p>{{item.quotes}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 tab">
                <div class="row center">
                    <div class="col-sm-6 tab__btn">
                        <a id="fame-text" href="#fame" class="tab__a tab__a-border">FAME LEVEL</a>
                        <a id="view-text" href="#view" class="tab__a">VIEWS</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="row slider-row center">
                    <div class="container mobile">
                        <a id="mfame-text" href="#fame" class="tab__a tab__a-border">FAME LEVEL</a>
                        <a id="mview-text" href="#view" class="tab__a">VIEWS</a>
                    </div>
                    <div id="chart" class="col-sm-6 chart">
                        <div id="fame" class="conteiner show chart__size">
                            <canvas id="lineCahrt" width="400" height="300" class="chart__js chart__size"></canvas>
                        </div>
                        <div id="view" class="hide container progress__size">
                            {% if views != None %}
                                <h4 class="progress__views">{{ views }} Views</h4>
                            {% else %}
                                <h4 class="progress__views">0 Views</h4>
                            {% endif %}
                            <h5 class="nowrap"><i class="fa fa-thumbs-o-up progress__like" aria-hidden="true"></i>
                                Likes</h5>
                            <div class="progress">
                                {% if likes_count != None %}
                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ likes_count }}%;"
                                         aria-valuenow="{{ likes_count }}" aria-valuemin="0" aria-valuemax="100">{{ likes_count }}
                                    </div>
                                {% else %}
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;"
                                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0
                                    </div>
                                {% endif %}
                            </div>
                            <h5 class="nowrap"><i class="fa fa-thumbs-o-down progress__dislike" aria-hidden="true"
                            ></i> Dislikes</h5>
                            <div class="progress">
                                {% if dislikes_count != None %}
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{ dislikes_count }}%"
                                         aria-valuenow="{{ dislikes_count }}" aria-valuemin="0" aria-valuemax="100">{{ dislikes_count }}
                                    </div>
                                {% else %}
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 0%"
                                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://d19m59y37dris4.cloudfront.net/dark-admin/1-4-5/vendor/chart.js/Chart.min.js"></script>
<script>
    var username = document.getElementsByClassName('info__username')[0].textContent;
    var endpoint = '/charts_data_' + username + '/';
    var labels = [];
    var likes = [];
    var dislikes = [];
    $.ajax({
        method: "GET",
        url: endpoint,
        success: (data) => {
            console.log(data);
            labels = data.labels;
            likes = data.likes;
            dislikes = data.dislikes;
            setChart();
        },
        error: (error_data) => {
            console.log('error_charts');
        }
    });

function setChart() {
    var ctx = document.getElementById('lineCahrt');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: "Likes",
                    fill: false,
                    backgroundColor: "#1e7e34",
                    borderColor: "#1e7e34",
                    data: likes
                },
                {
                    label: "Dislikes",
                    fill: false,
                    backgroundColor: "#bd2130",
                    borderColor: "#bd2130",
                    data: dislikes,
                },
            ]
        },
        options: {
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Stream name'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }]
            }
        }
    });
}

</script>
{% endblock %}